//个人中心选择
$(document).ready(function () {
    var $wrapper = $('.tab-wrapper'),
        $allTabs = $wrapper.find('.tab-content > div'),
        $tabMenu = $wrapper.find('.tab-menu li'),
        $mypbtn = $('.myp_btn');
    $allTabs.not(':first-of-type').hide();
    $tabMenu.each(function (i) {
        $(this).attr('data-tab', 'tab' + i);
    });
    $allTabs.each(function (i) {
        $(this).attr('data-tab', 'tab' + i);
    });
    $tabMenu.click(function () {
        var dataTab = $(this).data('tab'),
            $getWrapper = $(this).closest($wrapper);
        $getWrapper.find($tabMenu).removeClass('active');
        $(this).addClass('active');
        $getWrapper.find($allTabs).hide();
        $getWrapper.find($allTabs).filter('[data-tab=' + dataTab + ']').show();
    });
    $mypbtn.click(function () {
        var $getWrapper = $(this).closest($wrapper);
        $getWrapper.find($tabMenu).removeClass('active');
        $getWrapper.find($tabMenu).filter('[data-tab=tab1]').addClass('active');
        $getWrapper.find($allTabs).hide();
        $getWrapper.find($allTabs).filter('[data-tab=tab1]').show();
    })
});

//设置显示字长
function cutString(str, len) {
    //length属性读出来的汉字长度为1
    if (str.length * 2 <= len) {
        return str;
    }
    var strlen = 0;
    var s = "";
    for (var i = 0; i < str.length; i++) {
        s = s + str.charAt(i);
        if (str.charCodeAt(i) > 128) {
            strlen = strlen + 2;
            if (strlen >= len) {
                return s.substring(0, s.length - 1) + "...";
            }
        } else {
            strlen = strlen + 1;
            if (strlen >= len) {
                return s.substring(0, s.length - 2) + "...";
            }
        }
    }
    return s;
}

//个人中心异步刷新
$(function () {
    helangSearch.init();

    //异步刷新通知
    $(function () {
        $.get('/user/user_message/', {}, function (data) {
                var obj = JSON.parse(data);
                var comment_reply_info = obj['comment_reply_info'];
                var comment_reply_num = Object.keys(comment_reply_info).length;
                if (comment_reply_num !== 0) {
                    for (i = 0; i < comment_reply_num; i++) {
                        $(".tent_info").append(
                            '<br>' +
                            '<div class="ms-cont1" style="cursor: pointer;" onclick="$(this).hide().next().show()">' + "您的评论： " + cutString(comment_reply_info[i].content, 128) + '</div>' +
                            '<div class="ms-cont2" style="display: none;cursor: pointer;" onclick="$(this).hide().prev().show()">' + "您的评论： " + comment_reply_info[i].content + '</div>' +
                            '<br>' +
                            '<div class="one cont">' +
                            '<div class="cont_img">' +
                            '<img src="' + comment_reply_info[i].avatar + '">' +
                            '</div>' +
                            '<div class="onecontent">' +
                            '<div class="comment-right">' +
                            '<h4>' + comment_reply_info[i].name + '</h4>' +
                            '<div class="comment-content-header three">' +
                            '<span><i class="glyphicon glyphicon-time two"></i>' + '回复了你' + comment_reply_info[i].time + '</span>&nbsp;&nbsp;&nbsp;&nbsp;' +
                            '</div>' +
                            '<div class="ms-cont1" style="cursor: pointer;" onclick="$(this).hide().next().show()">' + cutString(comment_reply_info[i].reply_content, 255) + '</div>' +
                            '<div class="ms-cont2" style="display: none;cursor: pointer;" onclick="$(this).hide().prev().show()">' + comment_reply_info[i].reply_content + '</div>' +
                            '<br>' +
                            '<div class="comment-content-footer">' +
                            '</div>' +
                            '<div class="reply-list three">' +
                            '</div>' +
                            '<div class="reply_active" style="cursor: pointer;" onclick="$(this).next().toggle()">' +
                            '<img src="/static/images/reply_icon.png" width="30px" height="20px" style="float: right"></div>' +
                            '<div class="one three" style="display: none">' +
                            '<textarea class="con_back" id="con_back"></textarea>' +
                            '<div class="con_btn btn_back" id="' + comment_reply_info[i].comment_reply_id + '">回复</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>');
                    }
                } else {
                    console.log('还没有人评论');
                    $(".tent_info").append(
                        '<div class="my_picture">' +
                        '<p>呀！目前还没有通知哦</p>' +
                        '</div>'
                    )
                }
            }
        );
    });


});

//异步刷新评论
function comment_show() {
    $.get('/user/user_comment/', {}, function (data) {
            var obj = JSON.parse(data);
            var comment_all = obj['comment_info'];
            var comment_num = Object.keys(comment_all).length;
            if (comment_num !== 0) {
                for (i = 0; i < comment_num; i++) {
                    $(".comment_info").append(
                        '<div class="review ">' +
                        '        <div class="review-hd">' +
                        '            <a>' +
                        '                    <img class="lazy" src="' + comment_all[i].image_url + '" alt="' + comment_all[i].movie_name + '" style="display: inline;">' +
                        '            </a>' +
                        '        </div>' +
                        '        <div class="review-bd">' +
                        '            <h3><a href="/movie/single?movie_id='+ comment_all[i].movie_id +'" class="">' + comment_all[i].movie_name + '</a></h3>' +
                        '            <div class="review-meta">' +
                        '                ' + comment_all[i].time + ' 您评论了 ' +
                        '                <a">《' + comment_all[i].movie_name + '》</a>' +
                        '                    <span class="allstar40"></span>' +
                        '            </div>' +
                        '            <div class="review-content" style="cursor: pointer;" onclick="$(this).hide().next().show()">' + cutString(comment_all[i].content, 128) + '</div>' +
                        '            <div class="review-content" style="display: none;cursor: pointer;" onclick="$(this).hide().prev().show()"">' + comment_all[i].content + '</div>' +
                        '        </div>' +
                        '    </div>'
                    );
                }
            } else {
                console.log('还没有人评论');
                $(".comment_info").append(
                    '<div class="my_picture">' +
                    '<p>您目前还没有评论过哦</p>' +
                    '</div>')
            }
        }
    );
};

//异步刷新个人信息
function user_show() {
    $.get('/user/user_detail/', {}, function (data) {
        data = JSON.parse(data);
        $('#user_detail_show').html('');
        var user_info = data['user_info'][0];
        $('#user_detail_show').append(
            '<form action="/user/user_update/" method="post" enctype="multipart/form-data"' +
            '                              class="profile_form pure-form pure-form-aligned">' +
            '                            <div class="pure-g">' +
            '                                <div class="pure-u-1 pure-u-lg-1-2" style="margin: auto">' +
            '                                    <br>' +
            '                                    <div class="pure-control-group">' +
            '                                        <div class="con4">' +
            '                                            <img id="avatar" src="' + user_info.avatar + '"' +
            '                                                 width="200" height="200">' +
            '                                            <span class="btn upload" onclick="update_avatar();">更换头像<input type="file" class="upload_pic"' +
            '                                                                                name="avatar"' +
            '                                                                                id="id_avatar"/></span>' +
            '                                        </div>' +
            '                                    </div>' +
            '                                    <div class="pure-control-group">' +
            '                                        <label for="id_username">用户名</label>' +
            '                                        <input type="text" name="username" value="' + user_info.username + '" required=""' +
            '                                               id="id_username" maxlength="25">' +
            '                                    </div>' +
            '                                    <div class="pure-control-group">' +
            '                                        <label for="id_first_name">昵称</label>' +
            '                                        <input type="text" name="name" value="' + user_info.name + '" id="id_name" maxlength="30">' +
            '                                    </div>' +
            '                                    <div class="pure-control-group">' +
            '                                        <label for="id_last_name">密码</label>' +
            '                                        <input type="text" name="password" value="' + user_info.password + '" id="id_password" maxlength="30">' +
            '                                    </div>' +
            '                                    <div class="pure-control-group">' +
            '                                        <label for="id_gender">请选择</label>' +
            '                                        <select name="sex" id="id_gender">' +
            '                                            <option value="' + user_info.sex + '">---------</option>' +
            '                                            <option value="m" selected="">男性</option>' +
            '                                            <option value="f">女性</option>' +
            '                                        </select>' +
            '                                    </div>' +
            '                                    <div class="pure-control-group">' +
            '                                        <label for="id_email">电子邮箱地址</label>' +
            '                                        <input type="email" name="email" value="' + user_info.email + '" required=""' +
            '                                               id="id_email">' +
            '                                    </div>' +
            '                                    <div class="pure-control-group">' +
            '                                        <label for="id_date_of_birth">出生日期</label>' +
            '                                        <select name="date_of_birth_year" id="id_date_of_birth_year">' +
            '                                            <option value="0">---</option>' +
            '                                            <option value="1951">1951</option>' +
            '                                            <option value="1952">1952</option>' +
            '                                            <option value="1953">1953</option>' +
            '                                            <option value="1954">1954</option>' +
            '                                            <option value="1955">1955</option>' +
            '                                            <option value="1956">1956</option>' +
            '                                            <option value="1957">1957</option>' +
            '                                            <option value="1958">1958</option>' +
            '                                            <option value="1959">1959</option>' +
            '                                            <option value="1960">1960</option>' +
            '                                            <option value="1961">1961</option>' +
            '                                            <option value="1962">1962</option>' +
            '                                            <option value="1963">1963</option>' +
            '                                            <option value="1964">1964</option>' +
            '                                            <option value="1965">1965</option>' +
            '                                            <option value="1966">1966</option>' +
            '                                            <option value="1967">1967</option>' +
            '                                            <option value="1968">1968</option>' +
            '                                            <option value="1969">1969</option>' +
            '                                            <option value="1970">1970</option>' +
            '                                            <option value="1971">1971</option>' +
            '                                            <option value="1972">1972</option>' +
            '                                            <option value="1973">1973</option>' +
            '                                            <option value="1974">1974</option>' +
            '                                            <option value="1975">1975</option>' +
            '                                            <option value="1976">1976</option>' +
            '                                            <option value="1977">1977</option>' +
            '                                            <option value="1978">1978</option>' +
            '                                            <option value="1979">1979</option>' +
            '                                            <option value="1980">1980</option>' +
            '                                            <option value="1981">1981</option>' +
            '                                            <option value="1982">1982</option>' +
            '                                            <option value="1983">1983</option>' +
            '                                            <option value="1984">1984</option>' +
            '                                            <option value="1985">1985</option>' +
            '                                            <option value="1986">1986</option>' +
            '                                            <option value="1987">1987</option>' +
            '                                            <option value="1988">1988</option>' +
            '                                            <option value="1989">1989</option>' +
            '                                            <option value="1990">1990</option>' +
            '                                            <option value="1991">1991</option>' +
            '                                            <option value="1992">1992</option>' +
            '                                            <option value="1993">1993</option>' +
            '                                            <option value="1994">1994</option>' +
            '                                            <option value="1995">1995</option>' +
            '                                            <option value="1996">1996</option>' +
            '                                            <option value="1997">1997</option>' +
            '                                            <option value="1998">1998</option>' +
            '                                            <option value="1999">1999</option>' +
            '                                            <option value="2000">2000</option>' +
            '                                            <option value="2001">2001</option>' +
            '                                            <option value="2002">2002</option>' +
            '                                            <option value="2003">2003</option>' +
            '                                            <option value="2004">2004</option>' +
            '                                            <option value="2005">2005</option>' +
            '                                            <option value="2006">2006</option>' +
            '                                            <option value="2007">2007</option>' +
            '                                            <option value="2008">2008</option>' +
            '                                            <option value="2009">2009</option>' +
            '                                            <option value="2010">2010</option>' +
            '                                            <option value="2011">2011</option>' +
            '                                            <option value="2012">2012</option>' +
            '                                            <option value="2013">2013</option>' +
            '                                            <option value="2014">2014</option>' +
            '                                            <option value="2015">2015</option>' +
            '                                            <option value="2016">2016</option>' +
            '                                            <option value="2017">2017</option>' +
            '                                            <option value="2018">2018</option>' +
            '                                            <option value="2019">2019</option>' +
            '                                        </select>' +
            '                                        <select name="date_of_birth_month" id="id_date_of_birth_month">' +
            '                                            <option value="0">---</option>' +
            '                                            <option value="1">1</option>' +
            '                                            <option value="2">2</option>' +
            '                                            <option value="3">3</option>' +
            '                                            <option value="4">4</option>' +
            '                                            <option value="5">5</option>' +
            '                                            <option value="6">6</option>' +
            '                                            <option value="7">7</option>' +
            '                                            <option value="8">8</option>' +
            '                                            <option value="9">9</option>' +
            '                                            <option value="10">10</option>' +
            '                                            <option value="11">11</option>' +
            '                                            <option value="12">12</option>' +
            '                                        </select>' +
            '                                        <select name="date_of_birth_day" id="id_date_of_birth_day">' +
            '                                            <option value="0">---</option>' +
            '                                            <option value="1">1</option>' +
            '                                            <option value="2">2</option>' +
            '                                            <option value="3">3</option>' +
            '                                            <option value="4">4</option>' +
            '                                            <option value="5">5</option>' +
            '                                            <option value="6">6</option>' +
            '                                            <option value="7">7</option>' +
            '                                            <option value="8">8</option>' +
            '                                            <option value="9">9</option>' +
            '                                            <option value="10">10</option>' +
            '                                            <option value="11">11</option>' +
            '                                            <option value="12">12</option>' +
            '                                            <option value="13">13</option>' +
            '                                            <option value="14">14</option>' +
            '                                            <option value="15">15</option>' +
            '                                            <option value="16">16</option>' +
            '                                            <option value="17">17</option>' +
            '                                            <option value="18">18</option>' +
            '                                            <option value="19">19</option>' +
            '                                            <option value="20">20</option>' +
            '                                            <option value="21">21</option>' +
            '                                            <option value="22">22</option>' +
            '                                            <option value="23">23</option>' +
            '                                            <option value="24">24</option>' +
            '                                            <option value="25">25</option>' +
            '                                            <option value="26">26</option>' +
            '                                            <option value="27">27</option>' +
            '                                            <option value="28">28</option>' +
            '                                            <option value="29">29</option>' +
            '                                            <option value="30">30</option>' +
            '                                            <option value="31">31</option>' +
            '                                        </select>' +
            '                                    </div>' +
            '                                    <div class="pure-control-group">' +
            '                                        <label for="id_about_me">个人简介</label>' +
            '                                        <textarea name="remark"' +
            '                                                  style="height: 65px; overflow: hidden; overflow-wrap: break-word;"' +
            '                                                  rows="10" maxlength="500" id="id_about_me" value="' + user_info.remark + '"' +
            '                                                  cols="40"' +
            '                                                  class="autosize autosized"></textarea>' +
            '                                    </div>' +
            '                                </div>' +
            '                            </div>' +
            '                            <hr style="margin:20px 0 30px">' +
            '                            <div style="text-align:center">' +
            '                                <input type="button" class="pure-button button-green" id="submit"' +
            '                                       style="padding-left:120px;padding-right:120px" onclick="update_user()"' +
            '                                       value="保存">' +
            '                            </div>' +
            '                        </form>'
        );
        $("#id_date_of_birth_year option[value='" + user_info.year + "']").prop("selected", true);
        $("#id_date_of_birth_month option[value='" + Number(user_info.month) + "']").prop("selected", true);
        $("#id_date_of_birth_day option[value='" + Number(user_info.day) + "']").prop("selected", true);
        $("#id_gender option[value='" + user_info.sex + "']").prop("selected", true);
    });
};

//上传头像
function update_avatar() {
    //获取上传按钮
    var input1 = document.getElementById("id_avatar");
    if (typeof FileReader === 'undefined') {
        //result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input1.setAttribute('disabled', 'disabled');
    } else {
        input1.addEventListener('change', readFile, false);
    }

//获取上传图片地址
    function getFileURL(file) {
        var getUrl = null;
        if (window.createObjectURL != undefined) { // basic
            getUrl = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            getUrl = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            getUrl = window.webkitURL.createObjectURL(file);
        }
        return getUrl;
    }

//显示图片
    function readFile() {

        var file = this.files[0]; //获取上传文件列表中第一个文件

        if (!/image\/\w+/.test(file.type)) {
            //图片文件的type值为image/png或image/jpg
            alert("文件必须为图片！");
            return false;
        }

        var avatar_id = document.getElementById('avatar');
        var url = getFileURL(file);//把当前的 files[0] 传进去
        console.log(url);
        if (url) {
            avatar_id.src = url;
        }
    }
}

//点击提交个人信息
function update_user() {
    var formdata = new FormData();
    formdata.append('avatar', $("#id_avatar")[0].files[0]);
    formdata.append('username', $('#id_username').val());  //添加其他参数
    formdata.append('name', $('#id_name').val());
    formdata.append('email', $('#id_email').val());
    formdata.append('date_of_birth_year', $('#id_date_of_birth_year').val());
    formdata.append('date_of_birth_month', $('#id_date_of_birth_month').val());
    formdata.append('date_of_birth_day', $('#id_date_of_birth_day').val());
    formdata.append('sex', $('#id_gender').val());
    formdata.append('remark', $('#id_remark').val());
    $.ajax({
        type: 'post',
        url: '/user/user_update/',
        cache: false, //上传文件不需要缓存
        async: true,
        data: formdata,
        contentType: false, //不设置内容类型
        processData: false, //不处理数据
        success: function (data) {
            data = JSON.parse(data);
            alert(data['text'])
        }

    });

}

//提交通知中回复
$(".tent_info").on('click', '.btn_back', function () {
    var name1 = "Diuyon";
    var back_time = time();
    var reply_id = $(this).attr('id');
    var con_back = $(this).parent().parent().parent().find("#con_back").val();
    if (con_back == "") {
        return false;
    }
    var html_back;
    html_back = '<div class="reply">' +
        '<div class="rp_three">' +
        '<a class="replyname">' + name1 + '</a>:<span >回复于</span><span>' + back_time + '</span>' +
        '</div>' +
        '</div>' +
        '<p><span>' + con_back + '</span></p>';
    $(this).parent().parent().parent().find(".reply-list").append(html_back);
    $(this).parent().parent().parent().find("#con_back").val("");
    $.get('/user/user_new_reply/', {
        'media_id': 1,
        'reply_id': reply_id,
        'content': con_back,
    }, function () {
    });
});

//获取当前时间
function time() {
    function time(s) {
        return s < 10 ? '0' + s : s;
    }

    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1;
    var date = myDate.getDate();
    var h = myDate.getHours();
    var m = myDate.getMinutes();
    var s = myDate.getSeconds();
    return year + '年' + time(month) + "月" + time(date) + "日" + " " + time(h) + ':' + time(m) + ":" + time(s);
}
